<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/echarts.min.js"></script>
</head>
<body>
31<input type="checkbox" value="31" class="opt" checked readonly>
2<input type="checkbox" value="2" class="opt">
5<input type="checkbox" value="5" class="opt">
7<input type="checkbox" value="7" class="opt">
10<input type="checkbox" value="10" class="opt">
11<input type="checkbox" value="11" class="opt">
17<input type="checkbox" value="17" class="opt">
32<input type="checkbox" value="32" class="opt">
33<input type="checkbox" value="33" class="opt">
41<input type="checkbox" value="41" class="opt">
47<input type="checkbox" value="47" class="opt">
101<input type="checkbox" value="101" class="opt">
<input type="text" id="pShift" value="6">
<input type="button" value="show chart" id="show">
<div id="main" style="width: 800px;height:400px;"></div>
<script type="text/javascript">
        let showBtn = document.getElementById("show");
        showBtn.onclick = function(){
            let all = [];
            let opts = document.querySelectorAll(".opt")
            for(let i = 0; i < opts.length; i++) {
                if(opts[i].checked) {
                    let pShift = document.getElementById("pShift").value;
                    let multiplier = opts[i].value;
                    let url = `http://localhost:8080/test?multiplier=${multiplier}&pShift=${pShift}`;
                    let p = new Promise((resolve, reject) => {
                        fetch(url).then(resp =>
                            resp.json().then(data => resolve(data))
                        )
                    });
                    all.push(p);
                }
            }
            Promise.all(all).then(values=>{
                var option = {
                    xAxis: {
                        data: values[0].x
                    },
                    series: []
                }
                for(let i = 0; i < values.length; i++) {
                    option.series.push({
                        name: values[i].m,
                        type: 'line',
                        data: values[i].y
                    });
                }
                myChart.setOption(option);
            });
        }

        var myChart = echarts.init(document.getElementById('main'));

        var option = {
            title: {
                text: 'hash分布演示图'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                data: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63]
            },
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '31',
                    type: 'line',
                    data: [3496,3192,3219,3143,3309,3090,3093,3122,3071,2853,3697,5733,4393,4274,3466,4546,4225,4112,6137,4546,4271,3665,3229,3136,3404,3358,3190,4339,3428,3072,3023,3320,10282,12885,2968,3030,2969,2984,2818,3190,3455,2790,2929,2974,3212,2832,3505,3171,3710,2898,3007,2959,2999,2926,3229,3076,3161,2928,2805,3367,3098,4051,3140,3437]
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);


    </script>
</body>
</html>